import 'package:basic_web_flutter/compoment/home_nav_menu_item.dart';
import 'package:basic_web_flutter/style/home_style.dart';
import 'package:basic_web_flutter/utils/color_hex.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: HomeStyle.grwhiteColot,
        child: Row(
          children: [
            leftMenu(context),
            Expanded(
              child: Container(
                child: Column(
                  children: [rightTop(), rightMenu(), contentArea()],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  //左侧菜单栏
  Widget leftMenu(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
              color: Colors.black,
              blurRadius: 5,
              spreadRadius: 5,
              offset: Offset(5.0, 5.0)
          ),
        ]
      ),
      width: size.width * 0.12,
      child: Column(
        children: [
          Container(
            color: Colors.red,
              height: 70,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [Icon(Icons.live_tv_outlined, size: 30, color: Colors.white,), Text("  招投标管理平台", style: TextStyle(fontSize: 18, color: Colors.white),)],
              )),
          Expanded(
            child: Container(

            )
          )
        ],
      ),
    );
  }



  //右侧顶部栏目
  Widget rightTop() {
    return Container(
      color: Colors.red,
      height: 70,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            child: Row(
              children: [
                SizedBox(
                  width: 20,
                ),
                Icon(
                  Icons.menu,
                  color: Colors.white,
                  size: 30,
                ),
                Container(
                  padding: EdgeInsets.all(6),
                  height: 50,
                  child: Text(
                    "   辽宁省监狱管理局招标采购管理系统",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
                  ),
                )
              ],
            ),
          ),
          Row(
            children: [
              Icon(Icons.fit_screen, color: Colors.white, size: 30,),
              SizedBox(width: 10,),
              Text("招投标管理处", style: TextStyle(fontSize: 14, color: Colors.white),),
              SizedBox(width: 5,),
              Icon(Icons.keyboard_arrow_down, color: Colors.white, size: 30,),
              SizedBox(width: 20,),
            ],
          )
        ],
      ),
    );
  }

  //右侧菜单（面包屑）
  Widget rightMenu() {
    return Container(
        color: Colors.blue,
        height: 40,
        child: Row(
          children: [
            Expanded(
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 3,
                  itemBuilder: (context, index) {
                    return HomeNavMenuItem(true, "测试", Colors.grey,
                        Colors.black, Colors.black, Colors.grey, Colors.black);
                  }),
            ),
            TextButton(
                onPressed: () {},
                child: Text(
                  "更多",
                  style: TextStyle(color: Colors.black),
                ))
          ],
        ));
  }

  //内容区域
  Widget contentArea() {
    return Expanded(
      child: Container(
        color: HomeStyle.bgColor,
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(5)),
              color: Colors.white),
          margin: const EdgeInsets.all(8),
        ),
      ),
    );
  }
}
